<template>
	<view class="option-wrapper">
		<view class="option-add">
			<view class="option-title">
				<view class="add-option" @click="toggleTodo">待办</view>
				<view class="add-option" @click="toggleMoney">记账</view>
				<view @click="toggleTomato">番茄时钟</view>
			</view>
			<view class="option-content">
				<NewTodolist v-show="todolist" />
				<NewMoney v-show="money" />
				<NewTomato v-show="tomato" />
			</view>
		</view>

	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import NewTodolist from "./NewTodolist.vue"
	import NewMoney from "./NewMoney.vue"
	import NewTomato from "./NewTomato.vue"
	export default {
		data() {
			return {
				todolist: true,
				money: false,
				tomato: false,
			}
		},
		methods: {
			toggleTodo() {
				if (this.todolist === false) {
					this.todolist = true;
					this.money = false;
					this.tomato = false;
				}
			},
			toggleMoney() {
				if (this.money === false) {
					this.money = true;
					this.todolist = false;
					this.tomato = false;
				}
			},
			toggleTomato() {
				if (this.tomato === false) {
					this.tomato = true;
					this.todolist = false;
					this.money = false;
				}
			}

		},
		components: {
			NewTodolist,
			NewMoney,
			NewTomato,
		}
	}
</script>

<style lang="scss">
	.option-wrapper {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background: rgba(122, 119, 119, 0.5);
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		>.option-add {
			display: flex;
			flex-direction: column;
			background: white;
			width: 85%;
			border-radius: 10rpx;

			>.option-title {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(235, 231, 231, 1);
				font-size: 18px;
				padding: 10px;

				>.add-option {
					margin-right: 30rpx;
				}
			}

			>.option-content {
				padding: 5px;
			}
		}

	}
</style>
